<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
	<title>i2tree Selector - The Personal Knowledge Management Tools</title>
	
	<link rel="stylesheet"	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
	<style type="text/css">
		body {	font-size: 98.5%;	}		
		body {	font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";	}
		#selected_html { margin: 10px 0px;	 }
		#selected_html > .record {	padding: 10px;	}
		#selected_html > .record:HOVER { background: #F5DA81; color: #0404B4; }
		div[contenteditable] {
			border: 1px dotted #737CA1;	
			padding: 5px;
		}
		div[contenteditable]:HOVER {			
			border: 1px solid #F5DA81;				
		}
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript">
		$.extend({
		  getUrlVars: function(){
		    var vars = [], hash;
		    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		    for(var i = 0; i < hashes.length; i++)
		    {
		      hash = hashes[i].split('=');
		      vars.push(hash[0]);
		      vars[hash[0]] = decodeURIComponent(hash[1]);
		    }
		    return vars;
		  },
		  getUrlVar: function(name){
		    return $.getUrlVars()[name];
		  }
		});
	</script>
	<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
	<img src="http://dl.dropbox.com/u/4074962/database/bigfolder48.png" /><br>
	<a href="#" id="published_url"  ></a>
	<strong title="Useful when you search this node">Friendly File Name:</strong>
	<div id="name" contenteditable="true"></div>
	<strong>Title:</strong>
	<div id="title" contenteditable="true"></div>
	<strong>Keywords:</strong>
	<div id="keywords" contenteditable="true"></div>
	<br>
	<div id="selected_html" contenteditable="true"></div>
	
	<div style="float:right">
		<img id="ajax_loader" style="display:none;" src="http://drupal.org/files/54640843-ajax-style-loading-gif-animation.gif" />
		<button onclick="addInfoNode()" >Add to my Dropbox</button>
	</div>		
	
	<script type="text/javascript">	
		var check_status = false;
		var statusUrl = 'http://nguyentantrieu.info/i2tree/index.php/cloud_storage/check_status';		
		
		function checkLogin(){
			jQuery.get(statusUrl,{},function(rs) {			
				if(rs === 'false'){
					check_status = false;
				} else {
					check_status = true;
					if(autoPost){
						addInfoNode();
					}
				}
			} );
		}
		checkLogin();
		
		
		chrome.extension.onRequest.addListener(
			function(request, sender, sendResponse) {		
				{
					jQuery('#selected_html').html(request.html);
					jQuery('#name').html(safeStringForName(request.title));
					jQuery('#title').html(request.title);
					jQuery('#keywords').html(request.keywords);
				}
			}
		);
		
		function popupCenter(pageURL, w, h, top, left, nofocus) {
			if(typeof left === 'undefined' )
				left = (screen.width/2)-(w/2);
			if(typeof top === 'undefined' )
				top = (screen.height/2)-(h/2);
			if(top > 120 ) top -= 70;
			var params = 'menubar=0,resizable=1,toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,'; 
			params = params + ('width='+w+', height='+h+', top='+top+', left='+left);
			var win = window.open (pageURL, "_blank", params);
			if(typeof win.focus === 'function' && !nofocus) {
				win.focus();           
			}
			return win;
		}
		
		var autoPost = false;
		function addInfoNode(){
			if( ! check_status ) {
				var myWindow = popupCenter(statusUrl + '?web_login=true',960,600,50);	
				var timer = setInterval(function(){
					if(myWindow.closed){
						checkLogin();
						clearInterval(timer);
					}
				}, 500);
				autoPost = true;
				myWindow.focus();
				return;
			}
			jQuery('#ajax_loader').show();
			var f = function(rs){
				jQuery('#ajax_loader').hide();
				if( rs.indexOf('http') >= 0 ){
					jQuery('#published_url').attr('href', rs).text( jQuery('#title').text() );		
					window.location = rs;
				}
			};
			
			var data = {};
			data.html = jQuery('#selected_html').html();
			data.name = jQuery('#name').text();
			data.title = jQuery('#title').text();			
			data.keywords = jQuery('#keywords').text();
			jQuery.post('http://nguyentantrieu.info/i2tree/index.php/cloud_storage/add_info_node',data, f);
		}
		
		//vietnamese dumb
		var vietnameseSigns = [
	    	["a","A","e","E","o","O","u","U","i","I","d","D","y","Y"],
	    	["á","à","ạ","ả","ã","â","ấ","ầ","ậ","ẩ","ẫ","ă","ắ","ằ","ặ","ẳ","ẵ"],
	    	["Á","À","Ạ","Ả","Ã","Â","Ấ","Ầ","Ậ","Ẩ","Ẫ","Ă","Ắ","Ằ","Ặ","Ẳ","Ẵ"],
	    	["é","è","ẹ","ẻ","ẽ","ê","ế","ề","ệ","ể","ễ"],
	    	["É","È","Ẹ","Ẻ","Ẽ","Ê","Ế","Ề","Ệ","Ể","Ễ"],
	    	["ó","ò","ọ","ỏ","õ","ô","ố","ồ","ộ","ổ","ỗ","ơ","ớ","ờ","ợ","ở","ỡ"],
	    	["Ó","Ò","Ọ","Ỏ","Õ","Ô","Ố","Ồ","Ộ","Ổ","Ỗ","Ơ","Ớ","Ờ","Ợ","Ở","Ỡ"],
	    	["ú","ù","ụ","ủ","ũ","ư","ứ","ừ","ự","ử","ữ"],
	    	["Ú","Ù","Ụ","Ủ","Ũ","Ư","Ứ","Ừ","Ự","Ử","Ữ"],
	    	["í","ì","ị","ỉ","ĩ"],
	    	["Í","Ì","Ị","Ỉ","Ĩ"],
	    	["đ"],
	    	["Đ"],
	    	["ý","ỳ","ỵ","ỷ","ỹ"],
	    	["Ý","Ỳ","Ỵ","Ỷ","Ỹ"]
	    ];
		
		var removeSign = function(str) {
	        //Tiến hành thay thế , lọc bỏ dấu cho chuỗi
	        for (var i = 1; i < vietnameseSigns.length; i++) {
	            for (var j = 0; j < vietnameseSigns[i].length; j++){						
					str = str.replace( vietnameseSigns[i][j], vietnameseSigns[0][i - 1]);						
	            }
	        }
	        return str;
	    };		
		String.prototype.allTrim = String.prototype.allTrim || function(){
			return this.split(/\-+/).join('-');
		};
		
		
		var safeStringForName = function(str){			
			return removeSign(str).replace(/[^a-z0-9]/gi, '-').allTrim().toLowerCase();
		};
		
		$(function() {
			$( "input:submit, button" ).button();			
		});
	</script>
</body>
</html>